<template>
  <div>
    <el-container>
      <el-header class="header-css">
        <div class="head_box">
          <div class="test_logo" @click="to_home"></div>
          <div class="user_image">
            <el-popover
                placement="bottom-start"
                width="150px"
                trigger="hover">
              <i class="el-icon-user" slot="reference" v-if="!surname"></i>
              <span slot="reference" v-else>{{ surname }}</span>
              <div v-if="!surname" @click="user_login">
                <p class="user-box">登录</p>
              </div>
              <div v-else @click="user_logout">
                <p class="user-box" style="text-align: center">{{ nickname }}</p>
                <p class="user-box">注销</p>
              </div>
            </el-popover>
          </div>
        </div>
      </el-header>
      <el-main class="content-css">
        <div class="content">
          <div class="content-left">
            <el-menu
                default-active="1"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                router
                :collapse-transition="false"
                text-color="#eff3f6"
                background-color="rgba(4, 28, 40, 0.75)"
                :collapse="isCollapse">
              <el-radio-group v-model="isCollapse">
                <div>
                  <i v-if="isCollapse" class="el-icon-s-unfold switch" @click="navigation_bar_switch"
                     style="width: 64px"></i>
                  <i v-else-if="!isCollapse" class="el-icon-s-fold switch"
                     @click="navigation_bar_switch"
                     style="width: 200px"></i>
                </div>
              </el-radio-group>
              <el-submenu index="自动化测试">
                <template slot="title">
                  <i class="el-icon-menu icon-color"></i>
                  <span slot="title">自动化测试</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="基础测试" route="/base">基础测试</el-menu-item>
                  <el-menu-item index="回归测试" route="/regression">回归测试</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-menu-item index="定时任务" route="schedule_time_task">
                <i class="el-icon-time icon-color"></i>
                <span slot="title">定时任务</span>
              </el-menu-item>
              <el-menu-item index="报警管理" route="police">
                <i class="el-icon-bell icon-color"></i>
                <span slot="title">报警管理</span>
              </el-menu-item>
              <el-menu-item index="版本监控" route="version">
                <i class="el-icon-star-off icon-color"></i>
                <span slot="title">版本监控</span>
              </el-menu-item>
              <el-menu-item index="测试日志" route="log_manage">
                <i class="el-icon-tickets icon-color"></i>
                <span slot="title">测试日志</span>
              </el-menu-item>
              <el-menu-item index="测试用例管理" route="case_manage">
                <i class="el-icon-setting icon-color"></i>
                <span slot="title">回归测试用例管理</span>
              </el-menu-item>
              <el-menu-item index="用户管理" route="/user_manage">
                <i class="el-icon-user icon-color"></i>
                <span slot="title">用户管理</span>
              </el-menu-item>
            </el-menu>
          </div>
          <div class="content-right" :style="{'width': this.content_right_width}">
            <router-view name="layout"></router-view>
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import '../my_constants'
import {logoutUser} from "@/js/global_axios";

export default {
  name: "Back",
  data() {
    return {
      // 用户登录显示
      // 姓（昵称第一个字）
      surname: localStorage.getItem('surname'),
      // 昵称
      nickname: localStorage.getItem('nickname'),
      // 账号
      username: localStorage.getItem('username'),
      isCollapse: true,
      content_left_width: '',
      content_right_width: (document.body.scrollWidth - 64) + 'px',
      // 路径
      route_path: '',
    };
  },
  methods: {
    to_home() {
      // 跳转主页
      window.location.href = '/'
    },
    // 导航栏收缩switch
    navigation_bar_switch() {
      if (this.isCollapse) {
        this.isCollapse = false
        let width = document.body.scrollWidth
        this.content_right_width = width - 200 + 'px'
      } else {
        this.isCollapse = true
        let width = document.body.scrollWidth
        this.content_right_width = width - 64 + 'px'
      }
    },
    // 导航栏打开触发
    handleOpen(key, keyPath) {
    },
    // 导航栏关闭触发
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    // 用户点击登录触发
    user_login() {
      window.location.href = '/login'
    },
    // 用户点击注销触发
    user_logout() {
      logoutUser()
      setTimeout(function () {
        localStorage.removeItem('username');
        localStorage.removeItem('nickname');
        localStorage.removeItem('surname');
        // 注销登录后返回主页
        window.location.href = '/'
      }, 300)
    },
  },
}
</script>

<style scoped>
/* 头部栏 */
.header-css {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  z-index: 999;
  padding: 0;
  overflow: hidden;
  background-color: #353535;
}

.header-css:after {
  clear: both;
}

.head_box {
  text-align: center;
}

/* log */
.test_logo {
  float: left;
  background-image: url("../assets/1648125981629.png");
  background-position: 0 50%;
  background-size: 98% 98%;
  background-repeat: no-repeat;
  width: 150px;
  height: 60px;
}

.test_logo:hover {
  background-image: url("../assets/1648125469723.png");
  background-position: 0 50%;
  background-size: 98% 98%;
  background-repeat: no-repeat;
  width: 150px;
  height: 60px;
}

/* 用户头像 */
.user_image {
  float: right;
  height: 36px;
  width: 36px;
  margin: 12px 10px;
  font-size: 16px;
  color: #ffff;
  text-align: center;
  line-height: 35px;
  font-weight: bold;
  background: #d06b06;
  /* #b8b6b6 */
  border-radius: 50%;
}

.user_image:hover {
  color: #b8b6b6;
  background-color: #ffff;
}

.user-box {
  height: 40px;
  line-height: 40px;
  color: rgba(134, 133, 133, 0.71);
}

.user-box:hover {
  color: cornflowerblue;
  background-color: rgba(229, 224, 224, 0.98);
}


/* 内容体 */
.content-css {
  margin-top: 60px;
  padding: 0;
}

.content {
  width: 100%;
  display: flex;
  overflow: hidden;
  justify-content: flex-start;
}

/* 导航栏 */
.content-left {
  max-width: 200px;
  background-color: rgba(4, 28, 40, 0.99);
}

.el-menu {
  border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
  border: none;
}

/* 展开关闭 */
.switch {
  color: #dcd4d4;
  font-size: 30px;
  text-align: center;
  line-height: 56px;
}

.switch:hover {
  color: #eff3f6;
  background: #033c5c !important;
}

/* 导航栏分类 */
/deep/ .el-submenu__title:focus, /deep/ .el-submenu__title:hover {
  outline: 0 !important;
  color: #eff3f6 !important;
  background: #033c5c !important;
}

/* 悬浮样式和选择后的样式*/
.el-menu-item:hover {
  outline: 0 !important;
  color: #eff3f6 !important;
  background-color: #033c5c !important;
}

/* 选择后的样式 */
.el-menu-item.is-active {
  color: #eff3f6 !important;
  background: #033c5c !important;
}

/* 导航栏图标颜色*/
.icon-color {
  color: #eff3f6;
}

/* 右侧内容 */
.content-right {
  max-width: calc(100% - 64px);
  height: calc(100vh - 60px);
}
</style>